<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>青少年服饰销售分析系统 - 客户画像</title>
    <link rel="stylesheet" href="theme-dark.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#B399D4',  // 淡紫色
                        secondary: '#D8BFD8',  // 蓟色
                        tertiary: '#F0E6FF',  // 更淡的紫色
                        dark: '#663399',  // 深紫色
                        light: '#FAF5FF',  // 淡紫色背景
                        accent1: '#9370DB',  // 中紫色
                        accent2: '#BA55D3',  // 中等兰花紫
                        accent3: '#9932CC',  // 深兰花紫
                        accent4: '#8A2BE2',  // 蓝紫
                        accent5: '#9400D3'  // 深紫罗兰
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-glass {
                background: rgba(255, 255, 255, 0.85);
                backdrop-filter: blur(4px);
                -webkit-backdrop-filter: blur(4px);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .card-hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(79, 158, 253, 0.2);
            }
            .gradient-bg {
                background: linear-gradient(135deg, #B399D4 0%, #9370DB 100%);
            }
            .gradient-bg-secondary {
                background: linear-gradient(135deg, #D8BFD8 0%, #F0E6FF 100%);
            }
        }
    </style>
    
    <style>
        body {
            overflow-x: hidden;
            font-family: 'Inter', sans-serif;
                 overflow-x: hidden;
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #483f57 0%, #1A0A42 100%);
            color: #020202;        
        }
        
        #bg-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }
        
        .sidebar {
            height: 100vh;
            width: 240px;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 100;
            overflow-y: auto;
            transition: width 0.3s ease;
        }
        
        .sidebar.collapsed {
            width: 64px;
        }
        
        .sidebar.collapsed .sidebar-text {
            display: none;
        }
        
        .sidebar.collapsed .sidebar-item {
            justify-content: center;
        }
        
        .main-content {
            margin-left: 240px;
            transition: margin-left 0.3s ease;
        }
        
        .main-content.expanded {
            margin-left: 64px;
        }
        
        .sidebar-item {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            color: #6B7280;
            transition: all 0.3s ease;
        }
        
        .sidebar-item.active {
            color: #4F9EFD;
            background-color: rgba(79, 158, 253, 0.1);
        }
        
        .sidebar-item:hover {
            color: #4F9EFD;
            background-color: rgba(79, 158, 253, 0.05);
        }
        
        .sidebar-icon {
            width: 24px;
            height: 24px;
            margin-right: 12px;
        }
        
        .card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        
        .scroll-trigger {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        
        .scroll-trigger.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* 图表容器样式 */
        .chart-container {
            position: relative;
            overflow: hidden;
        }
        
        .chart-title {
            position: absolute;
            top: 15px;
            left: 15px;
            z-index: 10;
            font-weight: 600;
            color: #1E3A8A;
        }
    </style>
</head>
<body class="bg-light font-inter">
    <!-- 主题切换按钮 -->
    <div class="theme-toggle fixed top-4 right-4 z-50">
        <button id="toggle-theme" class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300">
            <i class="fa fa-moon-o"></i>
        </button>
    </div>
    
    <!-- 粒子画布 -->
    <canvas id="bg-canvas"></canvas>
    <canvas id="particles" class="canvas-particles"></canvas>
    
    <!-- 侧边栏导航 -->
    <div class="sidebar bg-glass shadow-lg" id="sidebar">
        <div class="p-4 border-b">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="bg-primary text-white p-2 rounded-lg mr-3">
                        <i class="fa fa-line-chart text-xl"></i>
                    </div>
                    <h1 class="text-xl font-bold text-dark sidebar-text">销售分析系统</h1>
                </div>
                <button id="toggle-sidebar" class="text-gray-500 hover:text-primary">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
        
        <div class="py-4">
            <a href="dashboard.html" class="sidebar-item">
                <i class="fa fa-dashboard sidebar-icon"></i>
                <span class="sidebar-text">销售总览</span>
            </a>
            <a href="customer.html" class="sidebar-item active">
                <i class="fa fa-users sidebar-icon"></i>
                <span class="sidebar-text">客户画像</span>
            </a>
            <a href="marketing.html" class="sidebar-item">
                <i class="fa fa-bullhorn sidebar-icon"></i>
                <span class="sidebar-text">营销效果</span>
            </a>
            <a href="season.html" class="sidebar-item">
                <i class="fa fa-calendar sidebar-icon"></i>
                <span class="sidebar-text">季节销售分析</span>
            </a>
            <a href="user.html" class="sidebar-item">
                <i class="fa fa-user-circle sidebar-icon"></i>
                <span class="sidebar-text">用户管理</span>
            </a>
        </div>
        
        <div class="absolute bottom-0 w-full p-4 border-t">
            <div class="flex items-center">
                <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                <div class="ml-3">
                    <p class="text-sm font-medium text-dark sidebar-text">管理员</p>
                    <p class="text-xs text-gray-500 sidebar-text">admin@example.com</p>
                </div>
                <button id="logout-btn" class="ml-auto text-gray-500 hover:text-red-500">
                    <i class="fa fa-sign-out"></i>
                </button>
            </div>
        </div>
    </div>
    
    <!-- 主内容区 -->
    <div class="main-content p-6">
        <!-- 顶部导航 -->
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-bold text-dark">客户画像</h2>
            <div class="flex items-center space-x-4">
                <div class="flex items-center space-x-4">
                    <div class="flex items-center space-x-2">
                        <span class="text-sm text-gray-600">筛选：</span>
                        <select id="filter-type" class="bg-white border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/50">
                            <option value="all">所有客户</option>
                            <option value="high">高价值客户</option>
                            <option value="new">新客户(30天内)</option>
                            <option value="lost">流失客户</option>
                            <option value="active">活跃客户</option>
                            <option value="vip">VIP客户</option>
                        </select>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="text-sm text-gray-600">地区：</span>
                        <select id="filter-region" class="bg-white border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/50">
                            <option value="all">全部地区</option>
                            <option value="beijing">北京</option>
                            <option value="shanghai">上海</option>
                            <option value="guangzhou">广州</option>
                            <option value="shenzhen">深圳</option>
                            <option value="hangzhou">杭州</option>
                            <option value="other">其他</option>
                        </select>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="text-sm text-gray-600">年龄：</span>
                        <select id="filter-age" class="bg-white border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/50">
                            <option value="all">全部年龄</option>
                            <option value="12-15">12-15岁</option>
                            <option value="16-18">16-18岁</option>
                            <option value="19-22">19-22岁</option>
                            <option value="23-25">23-25岁</option>
                            <option value="26-30">26-30岁</option>
                        </select>
                    </div>
                </div>
                <button id="export-btn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-custom">
                    <i class="fa fa-file-excel-o mr-2"></i>导出为CSV
                </button>
            </div>
        </div>
        
        <!-- 客户基本信息卡片 -->
        <div class="card p-6 mb-8">
            <h3 class="text-xl font-semibold text-dark mb-4">客户基本信息</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="scroll-trigger">
                    <div class="flex items-center">
                        <div class="bg-primary/10 p-4 rounded-full mr-4">
                            <i class="fa fa-user text-primary text-2xl"></i>
                        </div>
                        <div>
                            <p class="text-gray-500 mb-1">总客户数</p>
                            <h4 class="text-2xl font-bold text-dark">12,543</h4>
                            <p class="text-sm text-green-500 mt-1">
                                <i class="fa fa-arrow-up"></i> 8.2% 较上月
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="scroll-trigger">
                    <div class="flex items-center">
                        <div class="bg-secondary/10 p-4 rounded-full mr-4">
                            <i class="fa fa-clock-o text-secondary text-2xl"></i>
                        </div>
                        <div>
                            <p class="text-gray-500 mb-1">平均年龄</p>
                            <h4 class="text-2xl font-bold text-dark">18-25岁</h4>
                            <p class="text-sm text-gray-500 mt-1">
                                青少年占比 75%
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="scroll-trigger">
                    <div class="flex items-center">
                        <div class="bg-purple-100 p-4 rounded-full mr-4">
                            <i class="fa fa-map-marker text-purple-500 text-2xl"></i>
                        </div>
                        <div>
                            <p class="text-gray-500 mb-1">主要地区</p>
                            <h4 class="text-2xl font-bold text-dark">一线城市</h4>
                            <p class="text-sm text-gray-500 mt-1">
                                北京、上海、广州占比 60%
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 客户分析图表 - 第一行 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            <!-- 性别分布 -->
            <div class="card p-6 scroll-trigger">
                <h3 class="text-lg font-semibold text-dark mb-4">性别分布</h3>
                <div id="gender-chart" style="width: 100%; height: 300px;"></div>
            </div>
            
            <!-- 年龄分布 -->
            <div class="card p-6 scroll-trigger">
                <h3 class="text-lg font-semibold text-dark mb-4">年龄分布</h3>
                <div id="age-chart" style="width: 100%; height: 300px;"></div>
            </div>
            
            <!-- 地域分布 -->
            <div class="card p-6 scroll-trigger">
                <h3 class="text-lg font-semibold text-dark mb-4">地域分布</h3>
                <div id="region-chart" style="width: 100%; height: 300px;"></div>
            </div>
        </div>
        
        <!-- 客户分析图表 - 第二行 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            <!-- 消费能力 -->
            <div class="card p-6 scroll-trigger">
                <h3 class="text-lg font-semibold text-dark mb-4">消费能力</h3>
                <div id="consumption-chart" style="width: 100%; height: 300px;"></div>
            </div>
            
            <!-- 购买频率 -->
            <div class="card p-6 scroll-trigger">
                <h3 class="text-lg font-semibold text-dark mb-4">购买频率</h3>
                <div id="frequency-chart" style="width: 100%; height: 300px;"></div>
            </div>
            
            <!-- 品牌偏好 -->
            <div class="card p-6 scroll-trigger">
                <h3 class="text-lg font-semibold text-dark mb-4">品牌偏好</h3>
                <div id="brand-chart" style="width: 100%; height: 300px;"></div>
            </div>
        </div>
        
        <!-- 客户行为分析 -->
        <div class="card p-6 mb-8">
            <h3 class="text-lg font-semibold text-dark mb-4">客户行为分析</h3>
            <div id="behavior-chart" style="width: 100%; height: 400px;"></div>
        </div>
        
        <!-- 客户生命周期价值 -->
        <div class="card p-6 mb-8">
            <h3 class="text-lg font-semibold text-dark mb-4">客户生命周期价值</h3>
            <div id="clv-chart" style="width: 100%; height: 400px;"></div>
        </div>
        
        <!-- 高价值客户列表 -->
        <div class="card p-6 scroll-trigger">
            <h3 class="text-lg font-semibold text-dark mb-4">高价值客户列表</h3>
            <div class="overflow-x-auto">
                <table class="min-w-full">
                    <thead>
                        <tr class="bg-gray-50">
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">客户ID</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">年龄</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">地区</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">累计消费</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最近购买</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="font-medium text-gray-900">C00125</div>
                            </td>
                                                            <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/1027/32/32" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                                        <span>张小明</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">22</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">上海</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">¥12,540</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-11-15</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <button class="text-primary hover:text-primary/80">详情</button>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="font-medium text-gray-900">C00843</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/1001/32/32" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                                        <span>李华</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">20</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">北京</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">¥9,875</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-11-12</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <button class="text-primary hover:text-primary/80">详情</button>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="font-medium text-gray-900">C00456</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/1012/32/32" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                                        <span>王芳</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">24</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">广州</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">¥8,650</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-11-08</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <button class="text-primary hover:text-primary/80">详情</button>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="font-medium text-gray-900">C00789</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/1025/32/32" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                                        <span>赵伟</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">21</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">深圳</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">¥7,450</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-11-05</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <button class="text-primary hover:text-primary/80">详情</button>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="font-medium text-gray-900">C00321</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/1028/32/32" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                                        <span>陈静</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">23</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">杭州</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">¥6,890</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-11-03</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <button class="text-primary hover:text-primary/80">详情</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 客户详情弹窗 -->
    <div id="customer-detail-modal" class="fixed inset-0 z-50 hidden">
        <div class="absolute inset-0 bg-black bg-opacity-50"></div>
        <div class="relative max-w-2xl w-full mx-auto my-12 bg-white rounded-lg shadow-xl overflow-hidden">
            <div class="flex justify-between items-center px-6 py-4 border-b">
                <h3 class="text-xl font-semibold text-dark">客户详情</h3>
                <button id="close-modal" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="p-6">
                <div class="flex items-center mb-6">
                    <img id="detail-avatar" src="" alt="客户头像" class="w-16 h-16 rounded-full object-cover mr-4">
                    <div>
                        <h4 id="detail-name" class="text-xl font-bold text-dark"></h4>
                        <p id="detail-id" class="text-sm text-gray-500"></p>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h5 class="text-sm font-medium text-gray-500 mb-2">基本信息</h5>
                        <div class="space-y-2">
                            <p><span class="text-gray-600">年龄:</span> <span id="detail-age" class="text-dark"></span></p>
                            <p><span class="text-gray-600">地区:</span> <span id="detail-region" class="text-dark"></span></p>
                            <p><span class="text-gray-600">注册时间:</span> <span id="detail-register" class="text-dark"></span></p>
                        </div>
                    </div>
                    <div>
                        <h5 class="text-sm font-medium text-gray-500 mb-2">消费信息</h5>
                        <div class="space-y-2">
                            <p><span class="text-gray-600">累计消费:</span> <span id="detail-total" class="text-dark"></span></p>
                            <p><span class="text-gray-600">最近购买:</span> <span id="detail-last" class="text-dark"></span></p>
                            <p><span class="text-gray-600">平均消费:</span> <span id="detail-avg" class="text-dark"></span></p>
                        </div>
                    </div>
                </div>
                <div class="mt-6">
                    <h5 class="text-sm font-medium text-gray-500 mb-2">购买偏好</h5>
                    <div id="detail-preference" class="text-dark"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 主题切换功能
        document.addEventListener('DOMContentLoaded', function() {
            const toggleBtn = document.getElementById('toggle-theme');
            
            // 检查本地存储的主题偏好
            if (localStorage.getItem('theme') === 'dark' || 
                (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                document.body.classList.add('dark-mode');
                toggleBtn.innerHTML = '<i class="fa fa-sun-o"></i>';
            }

            // 主题切换按钮事件
            toggleBtn.addEventListener('click', function() {
                document.body.classList.toggle('dark-mode');
                const icon = document.body.classList.contains('dark-mode') ? 'sun-o' : 'moon-o';
                this.innerHTML = `<i class="fa fa-${icon}"></i>`;
                localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
            });
        });

        // 动态背景粒子效果
        function createParticles() {
            const canvas = document.getElementById('bg-canvas');
            const ctx = canvas.getContext('2d');
            
            // 设置canvas尺寸
            function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
            
            resizeCanvas();
            window.addEventListener('resize', resizeCanvas);
            
            // 创建粒子
            class Particle {
                constructor() {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.size = Math.random() * 3 + 1;
                    this.speedX = Math.random() * 2 - 1;
                    this.speedY = Math.random() * 2 - 1;
                    this.color = `rgba(179, 153, 212, ${Math.random() * 0.7 + 0.3})`;
                }
                
                update() {
                    this.x += this.speedX;
                    this.y += this.speedY;
                    
                    if (this.size > 0.2) this.size -= 0.001;
                    
                    // 边界检测
                    if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;
                    if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;
                }
                
                draw() {
                    ctx.fillStyle = this.color;
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                    ctx.fill();
                }
            }
            
            // 创建粒子数组
            let particles = [];
            const particleCount = 100;
            
            function init() {
                particles = [];
                for (let i = 0; i < particleCount; i++) {
                    particles.push(new Particle());
                }
            }
            
            // 动画循环
            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 绘制连接线
                for (let a = 0; a < particles.length; a++) {
                    for (let b = a; b < particles.length; b++) {
                        const dx = particles[a].x - particles[b].x;
                        const dy = particles[a].y - particles[b].y;
                        const distance = Math.sqrt(dx * dx + dy * dy);
                        
                        if (distance < 100) {
                            ctx.beginPath();
                            ctx.strokeStyle = `rgba(179, 153, 212, ${0.2 - distance/1000})`;
                            ctx.lineWidth = 0.5;
                            ctx.moveTo(particles[a].x, particles[a].y);
                            ctx.lineTo(particles[b].x, particles[b].y);
                            ctx.stroke();
                        }
                    }
                }
                
                // 更新并绘制粒子
                for (let i = 0; i < particles.length; i++) {
                    particles[i].update();
                    particles[i].draw();
                }
                
                requestAnimationFrame(animate);
            }
            
            init();
            animate();
        }
        
        // 侧边栏切换
        function setupSidebar() {
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.querySelector('.main-content');
            const toggleBtn = document.getElementById('toggle-sidebar');
            
            toggleBtn.addEventListener('click', () => {
                sidebar.classList.toggle('collapsed');
                mainContent.classList.toggle('expanded');
            });
        }
        
        // 滚动动画
        function setupScrollAnimation() {
            const scrollElements = document.querySelectorAll('.scroll-trigger');
            
            const elementInView = (el, dividend = 1) => {
                const elementTop = el.getBoundingClientRect().top;
                return (
                    elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend
                );
            };
            
            const displayScrollElement = (element) => {
                element.classList.add('visible');
            };
            
            const hideScrollElement = (element) => {
                element.classList.remove('visible');
            };
            
            const handleScrollAnimation = () => {
                scrollElements.forEach((el) => {
                    if (elementInView(el, 1.25)) {
                        displayScrollElement(el);
                    } else {
                        hideScrollElement(el);
                    }
                });
            };
            
            window.addEventListener('scroll', () => {
                handleScrollAnimation();
            });
            
            // 初始检查
            handleScrollAnimation();
        }
        
        // 初始化ECharts图表
        function initCharts() {
            // 性别分布图
            const genderChart = echarts.init(document.getElementById('gender-chart'));
            genderChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                series: [
                    {
                        name: '性别分布',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['50%', '50%'],
                        data: [
                            {value: 6542, name: '男性'},
                            {value: 5876, name: '女性'},
                            {value: 1125, name: '未指定'}
                        ],
                        itemStyle: {
                            borderRadius: 5,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        color: [
                            '#4F9EFD', '#7B61FF', '#E8F3FF'
                        ]
                    }
                ]
            });
            
            // 年龄分布图
            const ageChart = echarts.init(document.getElementById('age-chart'));
            ageChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    data: ['12-15岁', '16-18岁', '19-22岁', '23-25岁', '26-30岁', '30岁以上'],
                    axisLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '客户数量',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    }
                },
                series: [{
                    name: '客户数量',
                    type: 'bar',
                    data: [1250, 2870, 4560, 3250, 750, 463],
                    color: '#4F9EFD',
                    barWidth: '40%',
                    label: {
                        show: true,
                        position: 'top',
                        color: '#4A5568'
                    }
                }]
            });
            
            // 地域分布图
            const regionChart = echarts.init(document.getElementById('region-chart'));
            regionChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                series: [
                    {
                        name: '地域分布',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['50%', '50%'],
                        data: [
                            {value: 3760, name: '北京'},
                            {value: 3240, name: '上海'},
                            {value: 2250, name: '广州'},
                            {value: 1870, name: '深圳'},
                            {value: 1423, name: '其他一线城市'},
                            {value: 2000, name: '二线城市'}
                        ],
                        itemStyle: {
                            borderRadius: 5,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        color: [
                            '#4F9EFD', '#7B61FF', '#FF7D00', '#FF5630', '#36B37E', '#00B8D9'
                        ]
                    }
                ]
            });
            
            // 消费能力图
            const consumptionChart = echarts.init(document.getElementById('consumption-chart'));
            consumptionChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: ['500元以下', '500-1000元', '1000-2000元', '2000-5000元', '5000元以上'],
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                series: [
                    {
                        name: '客户数量',
                        type: 'bar',
                        data: [3500, 4200, 3100, 1500, 243],
                        color: '#7B61FF',
                        barWidth: '40%',
                        label: {
                            show: true,
                            position: 'right',
                            color: '#4A5568'
                        }
                    }
                ]
            });
            
            // 购买频率图
            const frequencyChart = echarts.init(document.getElementById('frequency-chart'));
            frequencyChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                series: [
                    {
                        name: '购买频率',
                        type: 'pie',
                        radius: ['30%', '70%'],
                        center: ['50%', '50%'],
                        data: [
                            {value: 5200, name: '每月1次'},
                            {value: 3500, name: '每季度1次'},
                            {value: 2100, name: '每半年1次'},
                            {value: 1743, name: '每年1次'},
                            {value: 0, name: '其他'}
                        ],
                        itemStyle: {
                            borderRadius: 5,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        color: [
                            '#4F9EFD', '#96C2FF', '#1E3A8A', '#E8F3FF', '#7B61FF'
                        ]
                    }
                ]
            });
            
            // 品牌偏好图
            const brandChart = echarts.init(document.getElementById('brand-chart'));
            brandChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    data: ['自有品牌', '品牌A', '品牌B', '品牌C', '品牌D', '其他'],
                    axisLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '偏好度(%)',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    }
                },
                series: [{
                    name: '偏好度',
                    type: 'bar',
                    data: [45, 25, 15, 8, 4, 3],
                    color: '#FF7D00',
                    barWidth: '40%',
                    label: {
                        show: true,
                        position: 'top',
                        color: '#4A5568',
                        formatter: '{c}%'
                    }
                }]
            });
            
            // 客户行为雷达图
            const behaviorChart = echarts.init(document.getElementById('behavior-chart'));
            behaviorChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                radar: {
                    indicator: [
                        { name: '浏览深度', max: 100 },
                        { name: '停留时间', max: 100 },
                        { name: '购买转化率', max: 100 },
                        { name: '分享意愿', max: 100 },
                        { name: '复购率', max: 100 },
                        { name: '推荐率', max: 100 }
                    ],
                    shape: 'circle',
                    splitNumber: 5,
                    axisName: {
                        color: '#4A5568'
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(79, 158, 253, 0.05)', 'rgba(79, 158, 253, 0.1)']
                        }
                    }
                },
                series: [
                    {
                        name: '客户行为',
                        type: 'radar',
                        data: [
                            {
                                value: [75, 80, 65, 70, 60, 75],
                                name: '高价值客户'
                            },
                            {
                                value: [60, 65, 50, 55, 45, 50],
                                name: '普通客户'
                            },
                            {
                                value: [40, 45, 30, 35, 25, 30],
                                name: '流失客户'
                            }
                        ],
                        lineStyle: {
                            width: 2
                        },
                        areaStyle: {
                            opacity: 0.2
                        },
                        symbol: 'circle',
                        symbolSize: 5
                    }
                ],
                color: [
                    '#4F9EFD', '#7B61FF', '#FF7D00'
                ]
            });
            
            // 客户生命周期价值图
            const clvChart = echarts.init(document.getElementById('clv-chart'));
            clvChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                legend: {
                    data: ['高价值客户', '中等价值客户', '低价值客户'],
                    top: '5%',
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '客户数量',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    }
                },
                series: [
                    {
                        name: '高价值客户',
                        type: 'line',
                        data: [520, 540, 580, 650, 690, 720, 780, 820, 850, 890, 920, 950],
                        color: '#4F9EFD',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: 'rgba(79, 158, 253, 0.5)'},
                                    {offset: 1, color: 'rgba(79, 158, 253, 0.05)'}
                                ]
                            }
                        },
                        label: {
                            show: true,
                            position: 'top',
                            color: '#4A5568'
                        }
                    },
                    {
                        name: '中等价值客户',
                        type: 'line',
                        data: [1250, 1320, 1380, 1450, 1520, 1580, 1650, 1720, 1780, 1850, 1920, 1980],
                        color: '#7B61FF',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: 'rgba(123, 97, 255, 0.5)'},
                                    {offset: 1, color: 'rgba(123, 97, 255, 0.05)'}
                                ]
                            }
                        },
                        label: {
                            show: true,
                            position: 'top',
                            color: '#4A5568'
                        }
                    },
                    {
                        name: '低价值客户',
                        type: 'line',
                        data: [2500, 2650, 2780, 2850, 2920, 3050, 3180, 3250, 3320, 3450, 3580, 3650],
                        color: '#FF7D00',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: 'rgba(255, 125, 0, 0.5)'},
                                    {offset: 1, color: 'rgba(255, 125, 0, 0.05)'}
                                ]
                            }
                        },
                        label: {
                            show: true,
                            position: 'top',
                            color: '#4A5568'
                        }
                    }
                ]
            });
            
            // 窗口大小变化时重绘图表
            window.addEventListener('resize', () => {
                genderChart.resize();
                ageChart.resize();
                regionChart.resize();
                consumptionChart.resize();
                frequencyChart.resize();
                brandChart.resize();
                behaviorChart.resize();
                clvChart.resize();
            });
        }
        
        // 客户详情弹窗功能
        function setupDetailModal() {
            const modal = document.getElementById('customer-detail-modal');
            const closeBtn = document.getElementById('close-modal');
            const detailBtns = document.querySelectorAll('table button.text-primary');
            
            // 关闭弹窗
            closeBtn.addEventListener('click', () => {
                modal.classList.add('hidden');
            });
            
            // 点击详情按钮
            detailBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const row = this.closest('tr');
                    const cells = row.querySelectorAll('td');
                    
                    // 填充弹窗数据
                    document.getElementById('detail-avatar').src = cells[1].querySelector('img').src;
                    document.getElementById('detail-name').textContent = cells[1].querySelector('span').textContent;
                    document.getElementById('detail-id').textContent = `ID: ${cells[0].textContent.trim()}`;
                    document.getElementById('detail-age').textContent = cells[2].textContent;
                    document.getElementById('detail-region').textContent = cells[3].textContent;
                    document.getElementById('detail-total').textContent = cells[4].textContent;
                    document.getElementById('detail-last').textContent = cells[5].textContent;
                    
                    // 模拟额外数据
                    document.getElementById('detail-register').textContent = '2022-' + (Math.floor(Math.random() * 12) + 1).toString().padStart(2, '0');
                    document.getElementById('detail-avg').textContent = '¥' + Math.floor(Math.random() * 1000 + 500);
                    document.getElementById('detail-preference').textContent = 
                        ['休闲装', '运动装', '正装'][Math.floor(Math.random() * 3)] + ' | ' +
                        ['S码', 'M码', 'L码'][Math.floor(Math.random() * 3)] + ' | ' +
                        ['蓝色系', '黑色系', '白色系'][Math.floor(Math.random() * 3)];
                    
                    // 显示弹窗
                    modal.classList.remove('hidden');
                });
            });
            
            // 点击背景关闭
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    modal.classList.add('hidden');
                }
            });
        }
        
        // 客户筛选功能
        function setupCustomerFilter() {
            const filterType = document.getElementById('filter-type');
            const filterRegion = document.getElementById('filter-region');
            const filterAge = document.getElementById('filter-age');
            const rows = document.querySelectorAll('tbody tr');
            
            function applyFilters() {
                const typeValue = filterType.value;
                const regionValue = filterRegion.value;
                const ageValue = filterAge.value;
                
                rows.forEach(row => {
                    const cells = row.querySelectorAll('td');
                    const region = cells[3].textContent.toLowerCase();
                    const age = cells[2].textContent;
                    let showRow = true;
                    
                    // 应用类型筛选
                    if (typeValue === 'high') {
                        const totalSpent = parseFloat(cells[4].textContent.replace('¥', '').replace(',', ''));
                        showRow = showRow && totalSpent > 5000;
                    } else if (typeValue === 'new') {
                        const lastPurchase = new Date(cells[5].textContent);
                        const thirtyDaysAgo = new Date();
                        thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
                        showRow = showRow && lastPurchase > thirtyDaysAgo;
                    } else if (typeValue === 'lost') {
                        const lastPurchase = new Date(cells[5].textContent);
                        const sixMonthsAgo = new Date();
                        sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 6);
                        showRow = showRow && lastPurchase < sixMonthsAgo;
                    } else if (typeValue === 'active') {
                        const lastPurchase = new Date(cells[5].textContent);
                        const threeMonthsAgo = new Date();
                        threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
                        showRow = showRow && lastPurchase > threeMonthsAgo;
                    } else if (typeValue === 'vip') {
                        const totalSpent = parseFloat(cells[4].textContent.replace('¥', '').replace(',', ''));
                        showRow = showRow && totalSpent > 10000;
                    }
                    
                    // 应用地区筛选
                    if (regionValue !== 'all') {
                        const regionMap = {
                            'beijing': '北京',
                            'shanghai': '上海',
                            'guangzhou': '广州',
                            'shenzhen': '深圳',
                            'hangzhou': '杭州'
                        };
                        const expectedRegion = regionMap[regionValue] || '';
                        showRow = showRow && (regionValue === 'other' ? 
                            !['北京','上海','广州','深圳','杭州'].includes(region) : 
                            region.includes(expectedRegion.toLowerCase()));
                    }
                    
                    // 应用年龄筛选
                    if (ageValue !== 'all') {
                        const [min, max] = ageValue.split('-').map(Number);
                        const customerAge = parseInt(age);
                        showRow = showRow && customerAge >= min && customerAge <= max;
                    }
                    
                    // 显示/隐藏行
                    row.style.display = showRow ? '' : 'none';
                });
            }
            
            // 添加事件监听
            filterType.addEventListener('change', applyFilters);
            filterRegion.addEventListener('change', applyFilters);
            filterAge.addEventListener('change', applyFilters);
        }
        
        // 导出功能
        function setupExport() {
            const exportBtn = document.getElementById('export-btn');
            
            exportBtn.addEventListener('click', function() {
                exportData('csv');
            });
        }
        
        function exportData(format) {
            // 获取当前筛选条件下的可见行
            const visibleRows = Array.from(document.querySelectorAll('tbody tr'))
                .filter(row => row.style.display !== 'none');
            
            if (visibleRows.length === 0) {
                alert('没有可导出的数据！');
                return;
            }
            
            // 准备导出数据
            const headers = ['客户ID', '姓名', '年龄', '地区', '累计消费', '最近购买'];
            const data = visibleRows.map(row => {
                const cells = row.querySelectorAll('td');
                return [
                    cells[0].textContent.trim(),
                    cells[1].querySelector('span').textContent.trim(),
                    cells[2].textContent.trim(),
                    cells[3].textContent.trim(),
                    cells[4].textContent.trim(),
                    cells[5].textContent.trim()
                ];
            });
            
            // 显示导出进度
            const exportModal = document.createElement('div');
            exportModal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
            exportModal.innerHTML = `
                <div class="bg-white rounded-lg p-6 max-w-md w-full">
                    <h3 class="text-lg font-semibold mb-4">正在导出数据...</h3>
                    <div class="w-full bg-gray-200 rounded-full h-2.5">
                        <div id="export-progress" class="bg-primary h-2.5 rounded-full" style="width: 0%"></div>
                    </div>
                    <p id="export-status" class="text-sm text-gray-600 mt-2">准备数据中...</p>
                </div>
            `;
            document.body.appendChild(exportModal);
            
            // 模拟导出过程
            const progress = exportModal.querySelector('#export-progress');
            const status = exportModal.querySelector('#export-status');
            
            let progressValue = 0;
            const interval = setInterval(() => {
                progressValue += 10;
                progress.style.width = `${progressValue}%`;
                
                if (progressValue === 10) status.textContent = '正在生成文件...';
                if (progressValue === 50) status.textContent = '正在格式化数据...';
                if (progressValue === 80) status.textContent = '即将完成...';
                
                if (progressValue >= 100) {
                    clearInterval(interval);
                    status.textContent = '导出完成！';
                    
                    // 根据格式执行不同操作
                    if (format === 'print') {
                        setTimeout(() => {
                            window.print();
                            exportModal.remove();
                        }, 500);
                    } else {
                        // 实际项目中这里应该调用后端API导出文件
                        // 这里用模拟下载代替
                        setTimeout(() => {
                            exportModal.remove();
                            alert(`已成功导出${visibleRows.length}条客户数据为${format.toUpperCase()}格式！`);
                            
                            // 模拟下载CSV文件
                            if (format === 'csv' || format === 'excel') {
                                let csvContent = headers.join(',') + '\n';
                                data.forEach(row => {
                                    csvContent += row.join(',') + '\n';
                                });
                                
                                const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
                                const url = URL.createObjectURL(blob);
                                const link = document.createElement('a');
                                link.setAttribute('href', url);
                                link.setAttribute('download', `客户数据_${new Date().toISOString().slice(0,10)}.csv`);
                                link.style.visibility = 'hidden';
                                document.body.appendChild(link);
                                link.click();
                                document.body.removeChild(link);
                            }
                        }, 1000);
                    }
                }
            }, 200);
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', () => {
            createParticles();
            setupSidebar();
            setupScrollAnimation();
            initCharts();
            setupDetailModal();
            setupCustomerFilter();
            setupExport();
        });
    </script>
</body>
</html>